<template>
  <j-modal
    :title="title"
    :width="1100"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :footer="null"
    @ok="handleOk"
  >
    <a-popconfirm
      class="shutBtn"
      title="是否要关闭记录吗?"
      ok-text="是"
      cancel-text="否"
      @confirm="onShut()"
      :disabled="!hasOperator || status == 4"
      v-if="!isExamine"
    >
      <a-button :disabled="!hasOperator || status == 4" type="primary">关闭任务</a-button>
    </a-popconfirm>
    <div class="person-info">
      <a-descriptions title="暴动事件" v-if="moduleType == 'caseEvent'" bordered>
        <a-descriptions-item label="办案人">
          {{ infoObject.apprehendUser }}
        </a-descriptions-item>
        <a-descriptions-item label="所属单位" :span="2">
          {{ infoObject.departName }}
        </a-descriptions-item>
        <a-descriptions-item label="联系电话">
          {{ infoObject.apprehendUserPhone }}
        </a-descriptions-item>
        <a-descriptions-item label="案事件办理时间" :span="2">
          {{ infoObject.startTime }} - {{ infoObject.endTime }}
        </a-descriptions-item>
        <a-descriptions-item label="案事件编号">
          {{ infoObject.incidentCode }}
        </a-descriptions-item>
        <a-descriptions-item label="案事件创建时间" :span="2">
          {{ infoObject.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="案事件描述">
          {{ infoObject.description }}
        </a-descriptions-item>
      </a-descriptions>
      <!-- 情报配置 -->
      <a-descriptions title="暴动事件" v-if="moduleType == 'intellConfig'" bordered>
        <a-descriptions-item label="办案人">
          {{ infoObject.apprehendUser }}
        </a-descriptions-item>
        <a-descriptions-item label="所属单位" :span="2">
          {{ infoObject.departName }}
        </a-descriptions-item>
        <a-descriptions-item label="联系电话">
          {{ infoObject.apprehendUserPhone }}
        </a-descriptions-item>
        <a-descriptions-item label="情报事件办理时间" :span="2">
          {{ infoObject.startTime }} - {{ infoObject.endTime }}
        </a-descriptions-item>
        <a-descriptions-item label="情报事件编号">
          {{ infoObject.incidentCode }}
        </a-descriptions-item>
        <a-descriptions-item label="情报事件创建时间" :span="2">
          {{ infoObject.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="情报事件描述">
          {{ infoObject.description }}
        </a-descriptions-item>
      </a-descriptions>
      <div style="margin:30px 0;">
        <a-row style="margin-bottom:20px;">
          <a-col :span="5">
            <span>任务名称：</span><span>{{ infoObject.taskName }}</span>
          </a-col>
          <a-col :span="9">
            <span>任务时间：</span><span>{{ infoObject.taskStartTime }} - {{ infoObject.taskEndTime }}</span>
          </a-col>
          <a-col :span="4">
            <p v-if="infoObject.status == '1'">任务状态：<span style="color:#1990ff;">待批</span></p>
            <p v-if="infoObject.status == '2'">任务状态：<span style="color:#43a812;">进行</span></p>
            <p v-if="infoObject.status == '3'">任务状态：<span style="color:#d9001b;">驳回</span></p>
            <p v-if="infoObject.status == '4'">任务状态：<span style="color:#b6aeae;">关闭</span></p>
          </a-col>
          <a-col :span="6">
            <span>协查函编号：</span><span>{{ infoObject.taskCode }}</span>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="5">
            <span>任务描述：</span><span>{{ infoObject.taskDescription }}</span>
          </a-col>
          <a-col :span="7">
            <span>创建时间：</span><span>{{ infoObject.taskCreateTime }}</span>
          </a-col>
        </a-row>
      </div>

      <div class="status" style="text-align: end;right: 24px;">
        <a-button type="primary" :disabled="!isDownloadPdf" @click="handleExport" :loading="loadingExport"
          >下载协查函</a-button
        >
      </div>
    </div>
    <div class="container">
      <a-tabs defaultActiveKey="model" class="tab-floor">
        <a-tab-pane tab="任务模型" key="model">
          <Model
            :taskId="taskId"
            :incidentId="incidentId"
            :approvalId="approvalId"
            @ok="handleCancel"
            :isViewModel="isViewModel"
            :isOperation="isOperation"
            @shikongpengzhaungModel="getShikongpengzhaung"
            :infoObject="infoObject"
          />
        </a-tab-pane>
        <a-tab-pane tab="目标对象" key="peopleList">
          <UserList :taskId="taskId" :moduleType="moduleType" />
        </a-tab-pane>
        <a-tab-pane tab="流程详情" key="steps">
          <Steps
            :taskId="taskId"
            :approvalId="approvalId"
            :taskInfo="taskInfo"
            :isExamine="isExamine"
            :isHandleUrge="isHandleUrge"
            @ok="handleCancel"
          />
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal v-model="visibleExport" title="提示">
      <template slot="footer">
        <a-button @click="handleExportCancel">
          否
        </a-button>
        <a-button type="primary" @click="handleExportOk">
          是
        </a-button>
      </template>
      <p>是否下载附录信息？</p>
    </a-modal>
  </j-modal>
</template>

<script>
import Model from './caseDetailcomponents/model'
import UserList from './caseDetailcomponents/userList'
import Steps from './caseDetailcomponents/steps'
import * as caseApi from '@/api/wxSmuggle/caseEvent.js'
import { downLoadFileReader } from '@/utils/export-util/util'
import moment from 'moment'
export default {
  name: 'caseDetailModal',
  components: { Model, UserList, Steps },
  props: {
    category: {
      type: String,
      default: '1' //默认案事件，为1
    },
    pageType: {
      type: String,
      default: 1 //默认案1：案事件列表
    },
    title: {
      type: String,
      default: '案事件任务详情'
    },
    moduleType: {
      type: String,
      default: 'caseEvent'
    },
    // 是否审批窗口
    isExamine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: this.$route.params.id,
      incidentId: null, //案事件id
      approvalId: null, //审批流程id
      infoObject: {},
      visible: false,
      disableSubmit: false,
      taskId: '',
      isHandleUrge: true, // 是否能操作催一下功能
      hasOperator: false,
      isViewModel: false, // 是否有权限看模型
      isDownloadPdf: false, // 是否有权限下载协查函
      isOperation: false, //控制模型里面按钮权限（审批人不能操作）
      loadingExport: false,
      isHasShikongpengzhaung: false,
      status: '',
      visibleExport: false
    }
  },
  async created() {
    // this.getDetails()
  },
  computed: {
    taskInfo() {
      return {
        incidentName: this.infoObject.incidentName,
        taskName: this.infoObject.taskName
      }
    }
  },
  methods: {
    show(record) {
      this.isHasShikongpengzhaung = false
      this.taskId = record.taskId
      this.visible = true
      this.current = 0
      this.getDetails()
    },
    getDetails() {
      caseApi
        .details({ taskId: this.taskId, pageType: this.pageType })
        .then(res => {
          if (res.success) {
            let result = res.result ? res.result : {}
            this.infoObject = result
            if (result && Object.keys(result).length > 0 && result.id) {
              this.incidentId = result.id
            }
            if (result && Object.keys(result).length > 0 && result.id) {
              this.approvalId = result.approvalId
            }
            this.hasOperator = result.hasOperator
            this.status = result.status
            this.isViewModel = result.isViewModel
            this.isDownloadPdf = result.isDownloadPdf
            this.isOperation = result.isOperation
            // 任务状态为关闭，不能操作催一下功能
            if (result && Object.keys(result).length > 0 && result.status == '4') {
              this.isHandleUrge = false
            }
          }
        })
        .catch(e => {
          this.$message.warn(res.message)
        })
    },
    handleCancel(bool) {
      this.visible = false
      if (bool && bool == 'success') {
        this.$emit('ok')
      }
    },
    handleOk() {
      this.visible = false
    },
    onShut() {
      let params = { id: parseInt(this.taskId), status: 4, category: this.category, pageType: this.pageType }
      caseApi
        .taskEditStatus(params)
        .then(res => {
          if (res.success) {
            this.$emit('shutTask')
            this.visible = false
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn(res.message)
        })
    },
    getShikongpengzhaung(val) {
      this.isHasShikongpengzhaung = val
    },
    handleExport() {
      if (this.infoObject.isSubCenter) {
        //是分中心账号就弹框提示
        this.visibleExport = true
      } else {
        //不是分中心账号就只下载普通协查函
        this.visibleExport = false
        this.loadingExport = true
        this.exportPdf()
      }
    },
    handleExportOk() {
      this.loadingExport = true
      this.exportPdf()
      if (this.isHasShikongpengzhaung) {
        //有时空碰撞模型,再额外导出execl
        this.exportExecl()
      }
    },
    handleExportCancel() {
      this.loadingExport = true
      this.exportPdf()
    },
    //下载普通的协查函
    exportPdf() {
      caseApi
        .exportPdf({ taskId: this.taskId, pageType: this.pageType })
        .then(res => {
          const fileName = `协查函数据-${moment(new Date().getTime()).format('YYYYMMDDHHmmss')}.pdf`
          downLoadFileReader(res, fileName)
        })
        .catch(err => {
          this.$message.warn('导出失败！')
        })
        .finally(() => {
          this.loadingExport = false
          this.visibleExport = false
        })
    },
    //下载时空碰撞
    exportExecl() {
      caseApi
        .exportExecl({ taskId: this.taskId, pageType: this.pageType })
        .then(res => {
          const fileName = `时空碰撞-${moment(new Date().getTime()).format('YYYYMMDDHHmmss')}.xls`
          downLoadFileReader(res, fileName)
        })
        .catch(err => {
          this.$message.warn('导出失败！')
        })
        .finally(() => {
          this.loadingExport = false
          this.visibleExport = false
        })
    },
    // 下载文件改名
    //url:文件地址 filename:想要修改为的名称
    downloadFile(url, filename) {
      let that = this
      this.getBlob(url, function(blob) {
        that.saveAs(blob, filename)
      })
    },
    getBlob(url, cb) {
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'blob'
      xhr.onload = function() {
        if (xhr.status === 200) {
          cb(xhr.response)
        }
      }
      xhr.send()
    },
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename)
      } else {
        var link = document.createElement('a')
        var body = document.querySelector('body')
        link.href = window.URL.createObjectURL(blob)
        link.download = filename
        link.style.display = 'none'
        body.appendChild(link)
        link.click()
        body.removeChild(link)
        window.URL.revokeObjectURL(link.href)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.con-content {
  .con-content-top {
    width: 80%;
    margin: 10px auto 50px auto;
  }
  // padding-bottom: 50px;
}
/deep/ .ant-modal-body {
  position: relative;
}
.shutBtn {
  position: absolute;
  right: 26px;
  top: 24px;
}
.footerBox {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}
.input {
  width: 90px;
  margin: 0 6px;
}
/deep/.ant-col-15 {
  width: 65%;
}
</style>
